<template>
    <div class="body">
        <el-card class="login-form-layout">
            <el-form
                :model="formData"
                :rules="loginRules"
                ref="loginForm"
                label-position="left">
                <div style="text-align: center">
                    <img :src="logo" style="width: 55px;height: 55px;">
                </div>
                <h2 class="login-title color-main">Mybatis-Mall</h2>
                <el-form-item prop="accountMember">
                    <el-input name="accountMember"
                        type="text"
                        v-model="formData.accountMember"
                        placeholder="请输入用户名">
                        <span slot="prefix">
                            <i class="el-icon-user color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password"
                        @keyup.enter.native="handleLogin"
                        v-model="formData.password"
                        placeholder="请输入密码"
                        show-password>
                        <span slot="prefix">
                            <i class="el-icon-lock color-main"></i>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verificationCode">
                    <el-input width="100px" name="verificationCode"
                        type="text"
                        v-model="formData.verificationCode"
                        placeholder="请输入验证码">
                        <span slot="append">
                            <img :src="verifyCode" alt="" @click="verifyTwice">
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="radio">
                    <el-radio-group v-model="formData.radio">
                        <el-radio :label="1">用户</el-radio>
                        <el-radio :label="2">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-bottom: 60px;text-align: center">
                    <el-button style="width: 45%" type="primary" @click="handlerlogin">
                        登录
                    </el-button>
                </el-form-item>
                <el-link type="primary" @click="toregister">去注册</el-link>
                <!-- <el-link type="primary" @click="findpassword">忘记密码</el-link> -->
            </el-form>
        </el-card>
        <img :src="bgp" class="login-center-layout">
    </div>
</template>

<script>
    import qs from 'qs'
    /* import LoginCenterBg from '@/images/login_center_bg.png' */
    import logo from '@/images/logo.png'
    import bgp from '@/images/bgp.png'
    export default {
        data () {
            const validateUsername = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入或输入正确的用户名')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validatePass = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入密码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateCode = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请输入验证码')
                    callback(e)
                } else {
                    callback()
                }
            }
            const validateradio = (rule, value, callback) => {
                if (value === '' || value === undefined || value === null) {
                    const e = new Error('请选择身份')
                    callback(e)
                } else {
                    callback()
                }
            }
            return {
                formData: {
                    accountMember: '',
                    password: '',
                    verificationCode: '',
                    radio: ''
                },
                config: {
                    theme: 'success',
                    message: ''
                },
                isLogin: false,
                verifyCode: null,
                // LoginCenterBg,
                logo,
                bgp,
                loginRules: {
                    accountMember: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateUsername
                        }
                    ],
                    password: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validatePass
                        }
                    ],
                    verificationCode: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateCode
                        }
                    ],
                    radio: [
                        {
                            required: true,
                            trigger: 'blur',
                            validator: validateradio
                        }
                    ]
                }
            }
        },
        created () {
            this.verifyTwice() // 进入登录界面之后先获取验证码
        },
        methods: {
            async getcode () {
                this.$http.get('/verify/getCodePicture/').then(res => {
                    //
                })
            },
            handlerlogin () {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.login()
                        this.loading = false
                    } else {
                        return false
                    }
                })
                this.verifyTwice()
            },
            async login () {
                if (this.formData.radio === 1) {
                    /* const data = {
                        'accountMember': this.accountMember,
                        'password': this.password,
                        'verificationCode': this.verificationCode
                    } */
                    
                    this.$http.post('/login/', qs.stringify(this.formData)).then(res => {
                        if (res.data.id > 0) {
                            this.isLogin = true
                            this.config.theme = 'success'
                            this.config.message = '登录成功'
                            console.log(res)
                            console.log(res.headers.token)
                            sessionStorage.setItem('token', res.headers.token)
                            sessionStorage.setItem('user', JSON.stringify(res.data))
                        } else {
                            this.isLogin = false
                            this.config.theme = 'error'
                            this.config.message = res.data.message
                        }
                        this.$bkMessage(this.config)
                        if (this.isLogin) {
                            this.$router.push({ path: '/commodity' })
                        }
                    })
                } else {
                    const data = {
                        'username': this.formData.accountMember,
                        'password': this.formData.password,
                        'verificationCode': this.formData.verificationCode
                    }
                    this.$http.post('admin/login/', qs.stringify(data)).then(res => {
                        console.log(res)
                        if (res.data.id > 0) {
                            this.isLogin = true
                            this.config.theme = 'success'
                            this.config.message = '登录成功'
                            console.log(res.headers.token)
                            sessionStorage.setItem('token', res.headers.token)
                            sessionStorage.setItem('user', JSON.stringify(res.data))
                        } else {
                            this.isLogin = false
                            this.config.theme = 'error'
                            this.config.message = '登录失败'
                        }
                        this.$bkMessage(this.config)
                        if (this.isLogin) {
                            this.$router.push({ path: '/commodity' })
                        }
                    })
                }
            },
            async verify () {
                this.$http.get('/verify/getCodePicture', { responseType: 'blob' }).then(res => {
                    const blob = new Blob([res.data])
                    const url = window.URL.createObjectURL(blob)
                    this.verifyCode = url
                })
            },
            toregister () {
                this.$router.push({ name: 'register' })
            },
            findpassword () {
                this.$router.push({ name: 'findpassword' })
            },
            verifyTwice () {
                this.verify()
                this.verify()
            }
        }
    }
</script>

<style scoped>
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 360px;
    margin: 140px auto;
    border-top: 10px solid #409EFF;
    opacity: 0.92;
  }

  .login-title {
    text-align: center;
  }

  .login-center-layout {
    background: #409EFF;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }
</style>
